<template>
  <div class="hospital">
    <!-- 左侧导航区域 -->
    <div class="menu">
      <div class="top">
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span> / 医院信息</span>
      </div>
      <!-- default-active：页面加载时默认激活菜单的 index -->
      <el-menu
        :default-active="$route.name"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          index="Register"
          @click="changeActive('Register')"
        >
          <el-icon>
            <Calendar />
          </el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item
          index="Detail"
          @click="changeActive('Detail')"
        >
          <el-icon>
            <document />
          </el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item
          index="Notice"
          @click="changeActive('Notice')"
        >
          <el-icon>
            <Bell />
          </el-icon>
          <span>预约须知</span>
        </el-menu-item>
        <el-menu-item
          index="Close"
          @click="changeActive('Close')"
        >
          <el-icon>
            <Warning />
          </el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item
          index="Search"
          @click="changeActive('Search')"
        >
          <el-icon>
            <Search />
          </el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容展示区域：路由组件展示位置 -->
    <div class="content">
      <!-- 子组件展示结构的地方 -->
      <router-view />
    </div>
  </div>
</template>

<script setup lang="ts">
// 左侧菜单需要用到的图标
import { HomeFilled, Document, Calendar, Search, Warning, Bell } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
// 引入仓库
import useDetailStore from '@/store/modules/hospitalDetail'
// 获取仓库对象
let detailStore = useDetailStore();
const $router = useRouter()
// 获取当前路由的信息
let $route = useRoute()
// 点击左侧菜单的回调
const changeActive = (name: string) => {
  // 跳转到对应的二级路由
  $router.push({ name: name, query: { hoscode: $route.query.hoscode } })
}
// 组件挂载完毕：同值pinia仓库请求获取医院详情的数据，存储仓库当中
onMounted(() => {
  // 获取医院详情的数据
  detailStore.getHospital($route.query.hoscode as string);
  // 获取某一个医院科室的数据
  detailStore.getDepartment($route.query.hoscode as string)
})
</script>
<script lang="ts">
export default {
  name: 'Hospital'
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;

  .menu {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      color: #7f7f7f;
    }
  }

  .content {
    flex: 8;
  }
}
</style>